<template>
  <div class="blog-index">
    <div class="left-side">
      <div class="header">
        <div class="title">
          <h2>Summer Time Record 夏令时记录</h2>
        </div>
        <div class="sign">
          <p>为了不再忘记，今天也描绘着...</p>
        </div>
      </div>
      <div class="article">
        <ArticleList :dataList="artList"></ArticleList>
      </div>
    </div>
    <div class="right-side">
      <Recommend></Recommend>
    </div>
  </div>
</template>

<script>
import ArticleList from '@/components/ArticleList';
import Recommend from './Recommend.vue';
export default {
  components: {
    ArticleList,
    Recommend,
  },
  data() {
    return {
      artList: [{}, {}, {}, {}, {}],
    };
  },
};
</script>

<style lang="less" scoped>
.blog-index {
  padding: 15px;
  display: flex;
  .left-side {
    background-color: rgb(241, 243, 244);
    flex: 1;
    overflow: hidden;
    min-height: calc(100vh - 76px);
    .article {
      padding: 10px;
    }
    .header {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 35px;
      .title {
        h2 {
          font-family: '华文中宋';
          font-size: 30px;
        }
      }
      .sign {
        p {
          font-size: 14px;
          letter-spacing: 2px;
          color: #888888;
        }
      }
    }
  }
  .right-side {
    width: 25%;
    // border: 1px solid #000;
    background-color: rgb(249, 249, 249);
  }
}
</style>
